<template>
  <section class="container">
    <top-header />
    <div class="content">
      <div class="main-content">
        <transition name="el-zoom-in-left">
          <div v-show="detailCollapse" class="stat-info">
            <div>
              <!--实名制考勤-->
              <attendance />
              <!--工程款信息-->
              <project-funs-info />
            </div>
            <milestoneNodes />
            <weather />
          </div>
        </transition>
        <div id="project-info" class="project-info" :class="{'project-info-unfold':!detailCollapse}">
          <project-info ref="projectInfo" @collapseStatus="getCollapseStatus" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { projectDetail } from '@/api/project'
import { mapGetters } from 'vuex'
import TopHeader from '@/views/homeModules/topHeader'
import AsideNav from '@/views/homeModules/asideNav'
import Attendance from '@/views/homeModules/attendance'
import ProjectFunsInfo from '@/views/homeModules/projectFunsInfo'
import MilestoneNodes from '@/views/homeModules/milestoneNodes'
import Weather from '@/views/homeModules/weather'
import ProjectInfo from '@/views/homeModules/projectInfo'
export default {
  name: 'HomePage',
  components: {
    AsideNav,
    TopHeader,
    Attendance,
    ProjectFunsInfo,
    MilestoneNodes,
    Weather,
    ProjectInfo
  },
  data() {
    return {
      collapse: true, // 左侧菜单栏折叠或展开
      detailCollapse: true // 默认右侧收起，展示左侧信息
    }
  },
  methods: {
    /**
     * 获取当前展开状态，控制页面
     */
    getCollapseStatus(collapse) {
      this.detailCollapse = collapse
    }
  }
}
</script>
<style lang="scss">
#app {
  min-height: 100%;
  background:none !important;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
</style>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
$--md-fade-transition: transform 300ms linear, opacity 300ms linear !default;
.container{
  background-color:#161A25;
  width:100%;
  height:100vh;
  min-width:1260px!important;
}

.content{
  overflow:hidden;
  .left-nav{
    margin-top:20px;
    float:left;
    width:49px;
    text-align:center;
    >i.el-icon-s-fold{
      color:#a7a8ac;
      opacity:1;
      font-size:1rem;
      cursor:pointer;
    }
  }
  .main-content{
    padding:42px 2.35%;
    height:calc(100vh - 50px);
    display:flex;
    flex-direction: row;
    justify-content : space-between;
    .stat-info{
      width:51.9%;
      height:100%;
      display:flex;
      flex-direction: column;
      >div{
        height:58%;
      }
    }
    .project-info{
      width:45%;
      height:100%;
      transition:all linear 300ms;
    }
    .project-info-unfold{
      transition:all linear 300ms;
      width:100%;
      height:100%;
    }
  }
}
@media screen and (max-height: 937px){
  .content{
    .main-content{
      padding:38px 2.35%;
    }
  }
}
@media screen and (max-height: 768px){
  .content{
    .main-content{
      padding:18px 2.35%;
    }
  }
}
@media screen and (min-width:1800px){
  .container{
    min-width:1330px;
  }
}
.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
  opacity: 1;
  transform: scaleX(1);
  transition: $--md-fade-transition;
  transform-origin: 0 50%;
}
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
  opacity: 0;
  transform: scaleX(0);
}
</style>
